<template>
  <!-- 生成JSON -->
  <el-drawer title="生成JSON"
             v-model="drawer.visible"
             size="70%"
             append-to-body
             class="form-design-drawer"
  >
    <vue-monaco-editor
        v-if="showEdit"
        theme="vs"
        :options="{
        colorDecorators: true,
        lineHeight: 24,
        tabSize: 2,
      }"
        language="javascript"
        height="calc(100% - 40px)"
        v-model="avueOptionStr"
    ></vue-monaco-editor>

    <div class="drawer-foot ">
      <el-popover placement="top"
                  trigger="hover"
                  width="250px">
        <template #default>
          <el-form v-model="configOption"
                   style="padding: 0 20px"
                   label-suffix="："
                   label-width="50px"
                   label-position="left">
            <el-form-item label="类型">
              <el-popover placement="top-start"
                          trigger="hover"
                          content="复制json对象"
                          style="margin-right: 15px;">
                <template #reference>
                  <el-radio slot="reference"
                            v-model="configOption.generateType"
                            value="json">json
                  </el-radio>
                </template>

              </el-popover>
              <el-popover placement="top-start"
                          trigger="hover"
                          content="复制string字符串，可直接用于后端保存无需再次处理。">
                <template #reference>
                  <el-radio
                      v-model="configOption.generateType"
                      value="string">string
                  </el-radio>
                </template>

              </el-popover>
            </el-form-item>
          </el-form>
        </template>
        <template #reference>
          <el-button size="default"
                     type="primary"
                     @click="handleGenerate">生成
          </el-button>
        </template>


      </el-popover>
      <el-button size="default"
                 type="primary"
                 @click="handleCopy"
                 style="margin-left: 10px;">复制
      </el-button>
    </div>
  </el-drawer>
</template>
<script>
import MonacoEditor from "components/form-design/utils/monaco-editor";
import beautifier from "components/form-design/utils/json-beautifier";
import designTools from "components/form-design/utils/designTools";
import {deepClone} from "utils/util";

export default {
  name: "formPreviewJson",
  components: {MonacoEditor},
  data() {
    return {
      showEdit: false,
      drawer: {visible: false},
      avueOptionStr: '',
      avueOption: {},
      configOption: {
        generateType: 'json'
      },
    }
  },
  created() {

  },
  methods: {
    show(avueOption) {
      avueOption = deepClone(avueOption)

      avueOption = designTools.designOptionToAvueOption(avueOption)
      this.avueOption = avueOption;
      this.avueOptionStr = beautifier(avueOption, {})
      this.drawer.visible = true
      this.$nextTick(() => this.showEdit = true)
    },
    handleGenerate() {

    },
    handleCopy() {
      // 生成JSON - 弹窗 - 拷贝
      let avueOption = designTools.designOptionToAvueOption(this.avueOption)
      this.$Clipboard({
        text: beautifier(avueOption, {
          minify: true
        })
      }).then(() => {
        this.$message.success('复制成功')
      }).catch(() => {
        this.$message.error('复制失败')
      })
    },
    close() {
      this.avueOption = {};
      this.drawer.visible = false;
    }
  }
}
</script>
<style lang="scss">
@use "./styles/form-design-drawer";
</style>
